<template>
  <div class="box">
    <!-- 头部 -->
    <div class="box-hd">
      <h2 class="title-div">
        <span class="fl">销售收入</span>
        <div class="fr">
          <el-button type="primary" size="small" @click="dialogAdd=true">新增收入</el-button>
        </div>
      </h2>
    </div>
    <!-- 内容区 -->
    <div class="box-bd p30">
      <!-- 筛选条件 -->
      <div class="search-box">
        <el-button icon="el-icon-search" size="small">筛选</el-button>
      </div>
      <!-- 列表数据 -->
      <div class="list-box">
        <el-table
          :data="tableData"
          max-height="500px"
          stripe
          class="table-list"
          v-loading="loading"
        >
          <el-table-column prop="receivablesDate" label="预计收款日期"></el-table-column>
          <el-table-column prop="customerName" label="客户">
            <template slot-scope="scope">{{ scope.row.customer.customerName }}</template>
          </el-table-column>
          <el-table-column prop="receivablesMoney" label="应收金额"></el-table-column>
          <el-table-column prop="alreadyMoney" label="实收金额"></el-table-column>
          <el-table-column prop="surplusMoney" label="应收余额"></el-table-column>
          <el-table-column label="发票状态">
            <template slot-scope="scope">{{ scope.row.star == 1 ? '已开':'无' }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="eceivables(scope.row)">收款</el-button>
              <!-- <el-button type="text" @click="edit(scope.row.id)">编辑</el-button> -->
              <el-button type="text" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :hide-on-single-page="false"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchData.currentPage"
          :page-sizes="[15, 25, 30, 50]"
          :page-size="searchData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.size"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增 -->
    <el-dialog
      title="新增收入"
      :visible.sync="dialogAdd"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <income-add @changeState="dialogAdd=$event" @reload="initTableData"></income-add>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="编辑收入"
      :visible.sync="dialogEdit"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <income-edit ref="editDialog" @changeState="dialogEdit=$event" @reload="initTableData"></income-edit>
    </el-dialog>
    <!-- 收款 -->
    <el-dialog
      title="收款"
      :visible.sync="dialogReceive"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <money-receive
        ref="receiveDialog"
        @changeState="dialogReceive=$event"
        @reload="initTableData"
      ></money-receive>
    </el-dialog>
  </div>
</template>
<script>
import { findReceivablesList, del } from '@/api/receive'
import IncomeAdd from './income-add.vue'
import IncomeEdit from './income-edit.vue'
import MoneyReceive from './money-receive.vue'
export default {
  components: {
    IncomeAdd,
    IncomeEdit,
    MoneyReceive
  },
  data() {
    return {
      companyId: this.$store.state.user.companyId,
      dialogEdit: false,
      dialogAdd: false,
      dialogReceive: false,
      tableData: [],
      loading: false,
      searchData: {
        customerType: '',
        currentPage: 1,
        pageSize: 15
      }
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    initTableData() {
      this.loading = true
      findReceivablesList(this.companyId).then(res => {
        this.tableData = res.data
        this.loading = false
      })
    },
    // 收款
    eceivables(obj) {
      this.dialogReceive = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.receiveDialog.initDialogData(obj)
      })
    },
    edit(id) {
      this.dialogEdit = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.editDialog.initDialogData(id)
      })
    },
    del(row) {
      del(row).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.searchData.currentPage = 1
          this.initTableData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.searchData.currentPage = 1
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.hd-title {
  color: #909399;
  font-size: 14px;
  height: 35px;
}
.box-bd {
  .side-bar {
    padding: 25px;
  }
  .table-list {
    margin-bottom: 15px;
  }
  .list-box {
    li {
      height: 30px;
      line-height: 30px;
    }
  }
}
.tab-nav {
  margin-bottom: 15px;
  margin-left: 100px;
  li {
    float: left;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    margin: 0 25px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    &.active {
      border-bottom-color: #1989fa;
      color: #1989fa;
    }
  }
}
</style>
